<template>
	<view class="page" ref="page">
		<!-- 搜索 -->
		<view class="search-index">

			<view class="search">
				<view class="iconfont icon-fadajing"></view>
				<input v-model="queryList.name" type="text" placeholder="商城推荐好物" />
				<button class="search-button" @click="getlist">搜索</button>
			</view>

		</view>

		<!-- 分类数据 -->
		<view class="classify-data" :style="'height:'+height+'px'">


			<view class="classify-one">
				<scroll-view scroll-y class="classify-list">

					<view class="list" :class="{ action: item.id === queryList['category_id'] }"
						v-for="(item,index) in categoryList" :key="index" @click="selectItem(item.id)">
						<text>{{item.name}}</text>
					</view>
				</scroll-view>

			</view>
			<view class="classify-two-three">
				<view class="">
					<view class="" v-if="downTime"> 距离下场拍卖剩余: {{t_days}}天{{t_hours}}:{{t_minutes}}:{{t_seconds}} </view>
					<button  v-if="!downTime"  @click="gotopaimai" >进入拍卖场</button>
					<!-- v-if="!downTime" -->
				</view>
				<scroll-view scroll-y class="scroll">
					<view class="classify-two" @click="gotoGoods(item)" v-for="(item,index) in swiperList" :key="index">

						<view class="classify-three">
							<view class="image">
								<image :src="item.title_img"></image>
								<view class="list">
									<view class="title">
										{{item.title}}
									</view>
									<view class="money">
										起拍价：￥{{item.start_price}}
									</view>
									<view class="">
										加价幅度：￥{{item.add_price}}
									</view>
								</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	import {
		getAuctionGoodsList,
		getCategoryList,
		getPaiMaiDownTime
	} from '@/config/api.js';
	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				queryList: {
					page: 1,
					limit: 30,
					name: '',
					des: '1',
					category_id: -1
				},
				swiperList:[],
				timer:null,
				height: 0,
				t_hours:0,
				t_days:0,
				t_minutes:0,
				t_seconds:0,
				downTime:0,
				selectedIndex: null,
				categoryList: [],
				classList: ['全部', '瓷器', '书画', '玉器', '玛瑙', '佛像', '珠宝', '茶叶', '农副产品']
			};
		},
		onLoad(option) {
			getCategoryList({
				nav_id: '1,5,8,9',
			}).then(res => {
				this.categoryList = [{
					name: '全部',
					id: -1
				}, ...res];
			});
			this.getlist();
		},
		onShow() {
			getPaiMaiDownTime().then(res => {
				if(res <= 0){
					this.downTime = false;
					this.endtime();
				}else{
					this.downTime = res;
					this.initime();
				}
			})
		},
		onReady() {
			setTimeout(() => {
				uni.hideTabBar()
			}, 100)
			let info = uni.createSelectorQuery().select(".page");
			info.boundingClientRect((data) => { //data - 各种参数
				console.log(data.height);
				this.height = data.height - 100;
				// #ifdef APP-PLUS 
				this.height = data.height - 130;
				// #endif 

			}).exec();

		},
		onUnload(){
			clearInterval(this.timer)
		},
		methods: {
			endtime(){
				clearInterval(this.timer)
			},
			initime(){
				this.timer = setInterval(()=>{
					this.downTime--;
					if(this.downTime<=0){
						this.endtime()
					}
					const t = this.convertSeconds(this.downTime)
					this.t_days = t['days'];
					this.t_hours = t['hours'];
					this.t_minutes = t['minutes'];
					this.t_seconds = t['seconds'];
				},1000)
			},
			 convertSeconds(seconds) {
				const days = Math.floor(seconds / 86400);
				seconds %= 86400;
				const hours = Math.floor(seconds / 3600);
				seconds %= 3600;
				const minutes = Math.floor(seconds / 60);
				const remainingSeconds = seconds % 60;
				return {
					days,
					hours,
					minutes,
					seconds: remainingSeconds
				};
			},
			gotopaimai(){
				// if(this.t_hours!=0||)
				uni.navigateTo({
					url: `/moduleB/GoodsDetails/paipinstart`,
				});
			},
			gotoGoods(item) {
				uni.navigateTo({
					url: `/moduleB/GoodsDetails/paipindetails?title=${encodeURIComponent(item.title+'详情')}&goodsId=${item.id}`,
				});
			},
			getlist() {
				getAuctionGoodsList(this.queryList).then(res => {
					this.swiperList = res.data;
				});
			},
			selectItem(id) {
				this.queryList['category_id'] = id;
				this.getlist();
			},

		}
	}
</script>

<style scoped lang="scss">
	@import 'class.scss'
</style>